<template>
  <view class="top">
    <view class="title">{{ title }}</view>
  </view>
</template>

<script setup>
import { reactive, ref, nextTick, onMounted } from "vue";
import { getCustomBar } from "../utils/utils";
const $props = defineProps({
  title: "",
  background: {
    type: String,
    default: "linear-gradient(180deg, #ccffff 50%, #ffffff 100%)",
  },
});
const $data = reactive({
  top: "",
  barHeight: "",
});
onMounted(() => {
  $data.top = getCustomBar() * 2 + 20 + "px";
  $data.barHeight = getCustomBar() / 2 + "px";
  console.log("top", $data.top);
});
</script>

<style lang="scss" scoped>
.top {
  // background: linear-gradient(180deg, #ccffff 50%, #ffffff 100%);
  background: v-bind("$props.background");
  height: v-bind("$data.top"); // 0rpx 60rpx 0rpx;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: v-bind("$data.barHeight");
  .title {
    font-size: 36rpx;
    font-weight: 700;
  }
}
</style>
